<template>
  <div>
    <el-dialog
      ref="refDlg"
      :title="formData.id ? '编辑' : '新增'"
      :visible.sync="dialogShow"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      width="600"
      @close="handleBack"
    >
      <div>
        <el-form ref="refForm" class="financeForm" :rules="formRules" :model="formData" size="mini" label-width="100px">
          <el-row>
            <el-col :span="24">
              <el-form-item label="区域编码:" size="mini" prop="areaCode">
                <span>{{ formData.areaCode }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="区域名称:" size="mini" prop="areaName">
                <el-input v-model.trim="formData.areaName" placeholder="请输入区域名称" />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="区域类型:" size="mini" prop="areaType">
                <c-dict-select v-model="formData.areaType" dict-type-code="AREA_TYPEAREA_TYPE" placeholder="区域类型" />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="区域显示顺序:" size="mini" prop="displayOrder">
                <el-input v-model.number="formData.displayOrder" placeholder="请输入区域显示顺序" />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="启用状态:" size="mini" prop="enable">
                <span>{{ formaterData(enableList, formData.enable) }}</span>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div slot="footer">
        <el-button size="mini" @click="handleBack">取消</el-button>
        <el-button type="primary" size="mini" @click="submitForm">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// import { getDictByPatchType } from '@/api/dataDict'
import { saveAreaConfig, getAreaDetail } from '@/api/basicData'
// import { getUserInfo } from '@/utils/auth'
// import fileUploader from '@/components/importFile'
// import { postConfigAttachmentTemplate, changeFileList } from '@/api/proConfig'
// import { getShopAttachment } from '@/api/decorate'
export default {
  name: 'EditDialog',
  // components: { fileUploader },
  props: {
    visible: {
      type: Boolean,
      default: false,
      required: true
    },
    detailData: {
      type: [String, Object],
      default: ''
    }
  },
  data() {
    const validateNum = (rule, value, callback) => {
      if (!value || value.length === 0) {
        return callback(new Error('请输入区域显示顺序'))
      } else {
        if (isNaN(Number(value)) || Number(value) < 0) {
          return callback(new Error('请输入正整数'))
        }
      }
      callback()
    }
    return {
      enableList: [
        { dictName: '启用', dictCode: 1 },
        { dictName: '停用', dictCode: 0 }
      ],
      formData: {
        enable: 1
      },
      formRules: {
        areaName: [{ required: true, message: '请输入区域名称' }],
        areaType: [{ required: true, message: '请选择区域类型' }],
        displayOrder: [{ required: true, message: '请输入区域显示顺序' },
          { validator: validateNum, message: '请输入正整数' }]
      }
    }
  },
  computed: {
    dialogShow: {
      get() {
        return this.visible
      },
      set(val) {
        this.$emit('update:visible', val)
      }
    }
  },
  created() {
    if (this.detailData.id) {
      getAreaDetail(this.detailData.id).then(res => {
        if (res.success && res.data) {
          this.formData = res.data
        }
      })
    }
  },
  methods: {
    // 格式化数据
    formaterData(arr, dictCode) {
      if (!arr || !arr.length) return
      const tmpArr = arr.filter(item => item.dictCode === dictCode)
      if (tmpArr.length) {
        return tmpArr[0].dictName
      }
      return dictCode
    },
    // 取消
    handleBack() {
      this.dialogShow = false
      this.clearForm()
    },
    // 清空表单
    clearForm(done) {
      this.formData = {}
      this.$refs.refForm && this.$refs.refForm.clearValidate()
      done && done()
    },
    // 提交
    submitForm() {
      this.$refs.refForm.validate((valid) => {
        if (valid) {
          saveAreaConfig(this.formData).then(res => {
            if (res.success) {
              this.$message.success('操作成功')
              this.dialogShow = false
              this.clearForm()
              const isNew = !this.formData.id
              this.$emit('success', isNew)
            }
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
